<template>
<div>
	<div class="g_box_con" style="padding:20px;">

		<Form  :label-width="90" style="width: 100%" inline>
			<Row>
				<Col span="5">
					<FormItem label="部门：">
						<Row v-for="(val,index) in xList" :key="index" style="margin-bottom:10px;">
							<Col span="24">
								<bumen_filter v-model="val.name" field="name"></bumen_filter>
							</Col>
						</Row>
						
					</FormItem>
				</Col>
				<Col span="9">
					<FormItem label="分级规则：">
						<Row v-for="(val,index) in xList" :key="index" style="margin-bottom:10px;">
							<Col span="20">
								<Select v-model="val.classRule" style="width:150px" placeholder="请选择分级规则" @on-open-change="rule_change($event,index)">
									<Option value="0" >不分级</Option>
									<Option value="1" >按地区分级</Option>
									<Option value="2" >按公司主体分级</Option>
								</Select>
							</Col>
							<Col span="4">
								<Button style="margin-left: 20px;" @click="del(index)">删除</Button>
							</Col>
						</Row>
					</FormItem>
				</Col>
				<Col span="10">
					<Row v-for="(val,index) in xList" :key="index" style="margin-bottom:10px;" >
						<div class="data_list" v-if="val.classRule==1">
							<span v-for="val_data in val.data">{{val_data}}</span>
						</div>
					</Row>
				</Col>
			</Row>
			
		</Form>
		<Row>
			<Button style="margin-left: 20px;" @click="handelAddRule()">添加横向表头</Button>
		</Row>
	</div>
	<!-- 金额 -->
	
	


	<Modal
        v-model="region.show"
        title="选择地区"
        >
        <div>
			
			<CheckboxGroup v-model="region.checkAllGroup" @on-change="checkAllGroupChange">
				<Checkbox :label="val.name" v-for="(val,index) in region.list" :key="index"></Checkbox>
			</CheckboxGroup>
			
		</div>
		<div slot="footer" style="text-align: center;">
			<div style="float: left;">
				<Checkbox
					:indeterminate="region.indeterminate"
					:value="region.checkAll"
					@click.prevent.native="handleCheckAll">全选</Checkbox>
			</div>
			<Button type="success" size="large"  @click="region_submit">提交</Button>
		</div>
    </Modal>

</div>
</template>

<script>
import bumen_filter from '@/themes/components/bumen_filter';
import Wcore from '@/libs/common';

export default {
	name:'a_xlist',
	components:{
		bumen_filter
	},
    data () {
		let self = this;
        return {
			Rules:[],
			xList:[],
			region:{
				show:false,
				indeterminate: false,
                checkAll: false,
                checkAllGroup: [],
				list:[],
				index:-1
			}
        };
	},
	created(){
		this.load_region();
		
		this.xList.push({name:'',classRule:'0',data:[]});
	},
	props: ['ruleList','addList','hTable'],
    watch: {
		
	},
	methods:{
		handelAddRule() {
			this.xList.push({name:'',classRule:'0',data:[]});
		},
		
		del(index) {
			this.xList.splice(index,1)
		},
		load_region(){
			var self = this;
			
			var postdata = {}
			
			Whttp.load('User/Region/get_all',postdata,function(res){
				self.region.list = res;
			});
		},
		rule_change(is_open,index){
			if(is_open){
				return;
			}
			var val = this.xList[index];
			
			if(val.classRule==1){
				this.region.index = index;
				this.region.checkAllGroup = this._getData(val.data);
				this.checkAllGroupChange(this.region.checkAllGroup);
				this.region.show = true;
			}
		},
		handleCheckAll () {
			this.region.checkAll = !this.region.checkAll;
			this.region.indeterminate = false;

			if (this.region.checkAll) {
				var ids = [];
				for(var i=0;i<this.region.list.length;i++){
					ids.push(this.region.list[i].name);
				}
				this.region.checkAllGroup = ids;
			} else {
				this.region.checkAllGroup = [];
			}
		},
		checkAllGroupChange (data) {
			if (data.length === this.region.list.length) {
				this.region.indeterminate = false;
				this.region.checkAll = true;
			} else if (data.length > 0) {
				this.region.indeterminate = true;
				this.region.checkAll = false;
			} else {
				this.region.indeterminate = false;
				this.region.checkAll = false;
			}
		},
		region_submit(){
			if(this.region.index<0){
				return ;
			}
			var ids = this._getData(this.region.checkAllGroup);
			this.region.show = false;
			this.xList[this.region.index].data = ids;
			
		},
		get_data(){
			if(this.xList.length>0){
				Wcore.setData('a_xlist',this.xList);
			}
			
			
			return this.xList;
		},
		set_data(data){
			this.xList = this._getData(data);
		}
	}
};
</script>
<style scoped>
.data_list{
	width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
.data_list span{
    margin-right: 10px;
    line-height: 30px;
}
</style>